<template>
  <mxp-translate ref="translateRef" :autoShow="true" :duration="duration" mode="fade">
    <view class="mxp-alert" :style="alertStyle" :class="cusClass">
      <view class="left-view">
        <slot name="icon">
          <mxp-icon v-if="showIcon" :name="newIcon" :size="iconSize" :color="newIconColor" :cusStyle="{ marginRight: '8px' }"></mxp-icon>
        </slot>
        <mxp-text-format v-if="lines && lines > 0" :lines="lines" :text="msg" :color="newMsgColor" :size="msgSize" :cusStyle="msgStyle"></mxp-text-format>
        <text v-else class="msg-text" :style="[{ fontSize: msgSize, color: newMsgColor }, msgStyle]">
          {{ msg }}
        </text>
      </view>
      <mxp-icon v-if="clearable" name="guanbi" :size="closeIconSize" :color="newCloseIconColor" :cusStyle="{ padding: '4px' }" @click="hide"></mxp-icon>
    </view>
  </mxp-translate>
</template>

<script lang="ts" setup>
  import MxpTranslate from '../mxp-translate/mxp-translate.vue';
  import MxpIcon from '../mxp-icon/mxp-icon.vue';
  import type { MxpIconFont } from '../mxp-icon/mxp-icon-font-map';
  import MxpTextFormat from '../mxp-text-format/mxp-text-format.vue';
  import { type CSSProperties, computed, ref } from 'vue';
  import type { $AllColorStr, $ColorType, $SizeUnitStr } from '@/mxp-ui/mxp-tool/types/interface';
  import { defThemeColor } from '../mxp-tool/theme/theme';
  import { lightenDarkenColorStorage } from '../mxp-tool/utils/color';

  export type $Props = {
    /** 是否显示图标 */
    showIcon?: boolean;
    /** 是否显示清除按钮图标 */
    clearable?: boolean;
    /** 类型 */
    type?: $ColorType;
    /** 图标  */
    icon?: MxpIconFont;
    /** 背景色 */
    background?: $AllColorStr;
    /** 图标颜色 */
    iconColor?: $AllColorStr;
    /** 图标大小 */
    iconSize?: $SizeUnitStr;
    /** 信息 */
    msg?: number | string;
    /** 文本颜色 */
    msgColor?: $AllColorStr;
    /** 文本颜色 */
    msgSize?: $SizeUnitStr;
    /** 关闭按钮颜色 */
    closeIconColor?: $AllColorStr;
    /** 关闭按钮颜色 */
    closeIconSize?: $SizeUnitStr;
    /** 动画持续时间 */
    duration?: number;
    /** 文本显示的行数，如果设置，超出此行数，将会显示省略号 */
    lines?: number;
    /** 消息文本的自定义样式 */
    msgStyle?: CSSProperties;
    /** 自定义的样式属性 */
    cusStyle?: CSSProperties;
    /** 自定义类名 */
    cusClass?: string;
  };
  defineOptions({
    name: 'mxp-alert',
  });
  const props = withDefaults(defineProps<$Props>(), {
    msg: '',
    type: 'primary',
    icon: undefined,
    background: undefined,
    iconColor: undefined,
    iconSize: '16px',
    msgColor: undefined,
    msgSize: '14px',
    closeIconColor: undefined,
    closeIconSize: '14px',
    zIndex: 9999,
    duration: 300,
    lines: undefined,
    showIcon: true,
    clearable: true,
    msgStyle: () => ({}),
    cusStyle: () => ({}),
    cusClass: '',
  });
  defineSlots<{
    /** 自定义图标 */
    icon?: () => void;
  }>();

  const optionsObj: Record<$ColorType, MxpIconFont> = {
    error: 'guanbi1',
    warning: 'jinggao',
    success: 'queding',
    primary: 'jinggao',
    info: 'jinggao',
  };

  /** toast */
  const translateRef = ref<InstanceType<typeof MxpTranslate> | null>(null);

  const newIcon = computed<MxpIconFont>(() => props.icon || optionsObj[props.type]);
  const newIconColor = computed<$AllColorStr>(() => props.iconColor || defThemeColor.value[props.type]);
  const newMsgColor = computed<$AllColorStr>(() => props.msgColor || defThemeColor.value[props.type]);
  const newCloseIconColor = computed<$AllColorStr>(() => props.closeIconColor || defThemeColor.value[props.type]);
  const alertStyle = computed<CSSProperties>(() => ({
    backgroundColor: props.background || lightenDarkenColorStorage(defThemeColor.value[props.type], 0.1)!,
    ...props.cusStyle,
  }));

  /**
   * 关闭
   */
  function hide() {
    translateRef.value?.hide();
  }
</script>

<style lang="scss" scoped>
  .mxp-alert {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px;
    overflow: hidden;
    border-radius: 6px;

    .left-view {
      display: flex;
      flex: 1;
      flex-flow: row nowrap;
      align-items: center;
      justify-content: flex-start;
      margin-left: 8px;

      .msg-text {
        margin-left: 8px;
      }
    }
  }
</style>
